<template>
    <el-dialog :close-on-click-modal="false" :title="titleMap[mode]" v-model="visible" :width="750" destroy-on-close
        @closed="$emit('closed')">
        <el-form :model="form" :rules="rules" :disabled="mode == 'show'" ref="dialogForm" label-width="80px" label-position="right">
            <el-row>
                <el-col :span="24">
                    <el-form-item label="名称" prop="name">
                        <el-input v-model="form.name" placeholder="请输入名称" clearable maxlength="50" show-word-limit></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="12">
                    <el-form-item label="类型" prop="categoryId">
                        <el-select v-model="form.categoryId" placeholder="请选择课程类型" clearable filterable style="width: 100%;">
                            <el-option :label="item.name" :value="item.id" v-for="(item,index) in categoryData" :key="index"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="难度" prop="difficultyId">
                        <el-select v-model="form.difficultyId" placeholder="请选择课程难度" clearable filterable style="width: 100%;">
                            <el-option :label="item.name" :value="item.id" v-for="(item,index) in difficultyData" :key="index"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="体验课" prop="isTrial">
                        <el-radio-group v-model="form.isTrial">
                            <el-radio :label="1">是</el-radio>
                            <el-radio :label="0">否</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item label="词汇随机" prop="isRandom" v-if="form.categoryId == 1">
                        <el-radio-group v-model="form.isRandom">
                            <el-radio :label="1">是</el-radio>
                            <el-radio :label="0">否</el-radio>
                        </el-radio-group>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="学段" prop="levelId">
                        <el-select v-model="form.levelId" placeholder="请选择课程学段" clearable filterable style="width: 100%;">
                            <el-option :label="item.name" :value="item.id" v-for="(item,index) in levelData" :key="index"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="教材" prop="bookId">
                        <el-select v-model="form.bookId" placeholder="请选择课程教材" clearable filterable style="width: 100%;">
                            <el-option :label="item.name" :value="item.id" v-for="(item,index) in bookData" :key="index"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="状态" prop="status">
                        <el-radio-group v-model="form.status">
                            <el-radio :label="1">启用</el-radio>
                            <el-radio :label="0">禁用</el-radio>
                        </el-radio-group>
                    </el-form-item>
                </el-col>
            </el-row>
            
        </el-form>
        <template #footer>
            <el-button @click="visible = false">取 消</el-button>
            <el-button v-if="mode != 'show'" type="primary" :loading="isSaveing" @click="submit()">保 存</el-button>
        </template>
    </el-dialog>
</template>

<script>
export default {
    emits: ['success', 'closed'],
    props: {
        categoryData: {
            type: Array,
            default: () => {
                return []
            }
        },
        levelData: {
            type: Array,
            default: () => {
                return []
            }
        },
        difficultyData: {
            type: Array,
            default: () => {
                return []
            }
        },
        bookData: {
            type: Array,
            default: () => {
                return []
            }
        },
    },
    data() {
        return {
            mode: "add",
            titleMap: {
                add: '新增课程',
                edit: '编辑课程',
                show: '查看'
            },
            visible: false,
            isSaveing: false,
            //表单数据
            form: this.getDefaultRuleForm(),
            //验证规则
            rules: {
                name: [
                    { required: true, message: '请输入名称', trigger: 'blur' },
                ],
                categoryId: [
                    { required: true, message: '请选择课程类型', trigger: 'change' },
                ],
                levelId: [
                    { required: true, message: '请选择课程学段', trigger: 'change' },
                ],
                difficultyId: [
                    { required: true, message: '请选择课程难度', trigger: 'change' },
                ],
                bookId: [
                    { required: true, message: '请选择课程教材', trigger: 'change' },
                ]
                
            },
        }
    },
    mounted() {
    },
    methods: {
        //显示
        open(mode = 'add') {
            this.mode = mode;
            this.visible = true;
            return this
        },
        //表单提交方法
        submit() {
            this.$refs.dialogForm.validate(async (valid) => {
                if (!valid) {
                    return false
                }

                let data = {}
                for (let key in this.form) {
                    data[key] = this.form[key]
                }

                try {
                    this.isSaveing = true;
                    if (this.form.id) {
                        await this.$API.course.action.put(data)
                    } else {
                        await this.$API.course.action.post(data)
                    }
                    this.$emit('success', this.form, this.mode)
                    this.visible = false;
                    this.$notify.success("保存成功")
                } finally {
                    this.isSaveing = false;
                }
            })
        },
        //表单注入数据
        setData(data) {
            let _form = {
                id: data.id,
                name: data.name,
                categoryId: data.category ? data.category.id : null,
                levelId: data.level ? data.level.id : null,
                difficultyId: data.difficulty ? data.difficulty.id : null,
                bookId: data.book ? data.book.id : null,
                isTrial: data.isTrial ? data.isTrial.value : 0,
                status: data.status ? data.status.value : 1,
                isRandom: data.isRandom ? data.isRandom.value : 0,
            }
           
            this.form = _form
            return this
        },
        getDefaultRuleForm() {
            return {
                id: null,
                name: '',
                categoryId: null,
                levelId: null,
                difficultyId: null,
                bookId: null,
                isTrial: 0,
                status: 1,
                isRandom: 0,
            }
        },
    }
}
</script>

<style>
</style>
